<template>
  <div>
    <div class="broadcast">
      <div class="item" v-for="(v, k) in broadcastList" :key="v.id" @click="$router.push({name: 'BroadCastDetail', params: {id: v.id}})">
        <img :src="v.image">
        <div class="text">
          <div class="title">{{v.title}}</div>
          <div class="desc">发布时间：{{v.add_time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BroadCast',
    data () {
      return {
        broadcastList: [],
        imageList: []
      }
    },
    methods: {
      getList () {
        this.$post('/vue/broadcast/get_list').then(data => {
          this.broadcastList = data.list
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-blue: rgb(108, 184, 222);

  .broadcast {
    padding-left: 12px;
    min-height: 100vh;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .item {
      padding: 12px 0;
      border-bottom: 1px solid @c-226;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      img {
        width: 30.4vw;
        height: calc(30.4vw * 72 / 114);
        margin-right: 12px;
      }
      .text {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        text-align: left;
        padding-right: 12px;
        .title {
          width: 100%;
          flex: 0 0 auto;
          font-size: 13px;
          line-height: 24px;
          font-weight: bold;
          color: @c-124;
        }
        .desc {
          width: 100%;
          flex: 0 0 auto;
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
        }
      }
    }
  }
</style>